<template>
    <div class="body bg-body">
        <div class="w pos-rel" style="height: 330px; z-index: 1">
            <div
                class="w-100 bor-shadow bg-white box-size flex pos-abs"
                style="height: 440px; padding: 50px 80px 0 30px; top: -110px"
            >
                <div
                    class="pos-abs txt-info cur-p"
                    style="right: 30px; top: 30px"
                    @click="$router.push('/news/newsLists')"
                >
                    <span style="margin-right: 5px">更多</span>
                    <span class="el-icon-d-arrow-right"></span>
                </div>
                <img
                    src="../../assets/images/home/news.png"
                    width="364"
                    height="346"
                />
                <div class="flex-1 over-hide" style="margin-left: 30px">
                    <div
                        class="w-100 cur-p flex"
                        v-for="(item, index) in news"
                        :key="index"
                        @click="
                            $router.push({
                                name: 'newsDetail',
                                params: { id: item.uids },
                            })
                        "
                        style="margin-bottom: 16px"
                    >
                        <div
                            class="txt-subTit bg-white2 txt-cen"
                            style="
                                width: 70px;
                                height: 70px;
                                margin-right: 10px;
                                display: inline-flex;
                                flex-direction: column;
                                justify-content: center;
                            "
                        >
                            <p class="fs-26" style="line-height: 20px;margin-bottom: 10px;">
                                {{ $format(item.PUBLISH_TIME, 'dd') }}
                            </p>
                            <p style="line-height: 15px;">{{ $format(item.PUBLISH_TIME, 'yyyy.MM') }}</p>
                        </div>
                        <div
                            class="flex-1 flex flex-col jus-between over-hide"
                            style="display: inline-block"
                        >
                            <p
                                class="fs-bold txt-tit fs-16 one-elli"
                                style="font-family: Microsoft YaHei"
                            >
                                【{{ item.name }}】{{ item.content }}
                            </p>
                            <p
                                class="more-elli over-hide pl-10"
                                style="height: 42px;margin-top: 8px;color: #999;"
                            >
                                {{ item.news }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="w" style="margin: 28px auto 70px">
            <div class="tit-box txt-cen txt-tit fs-bold">
                <div class="fs-34">“业务+数据”双引擎</div>
                <p class="fs-16">
                    用有效的管理建议+成熟的智能化技术为客户创造价值
                </p>
            </div>

            <div class="ability-box flex ali-cen">
                <div class="ability pos-rel bg cur-p">
                    <div class="pos-cen">
                        <div class="sign bg" style="margin: 0 auto 35px"></div>
                        <div class="txt-white fs-16 fs-bold txt-cen">
                            卓越咨询能力
                        </div>
                    </div>
                </div>
                <div class="ability pos-rel bg cur-p">
                    <div class="pos-cen">
                        <div class="sign bg" style="margin: 0 auto 35px"></div>
                        <div class="txt-white fs-16 fs-bold txt-cen">
                            顶级研发技术
                        </div>
                    </div>
                </div>
                <div class="ability pos-rel bg cur-p">
                    <div class="pos-cen">
                        <div class="sign bg" style="margin: 0 auto 35px"></div>
                        <div class="txt-white fs-16 fs-bold txt-cen">
                            优质服务口碑
                        </div>
                    </div>
                </div>
                <div class="ability pos-rel bg cur-p">
                    <div class="pos-cen">
                        <div class="sign bg" style="margin: 0 auto 35px"></div>
                        <div class="txt-white fs-16 fs-bold txt-cen">
                            高效管理体系
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="system-box bg">
            <div class="tit-box txt-cen txt-white" style="padding: 40px 0 0">
                <div class="fs-bold fs-34">产品体系</div>
                <p class="fs-16">高科技含量、高品质保障、高时效性、高附加值</p>
            </div>

            <div class="m-auto" style="height: 430px">
                <swiper class="h-100" ref="mySwiper" :options="swiperOptions">
                    <swiper-slide
                        class="w-100 flex ali-cen"
                        v-for="(item, index) in system"
                        :key="index"
                    >
                        <div class="line-flex jus-cen sys-box">
                            <img :src="item.pic" width="45%" />
                            <div
                                class="bg-white box-size flex flex-col jus-cen px-20"
                                style="width: 55%"
                            >
                                <div class="txt-tit" style="font-size: 22px">
                                    {{ item.tit }}
                                </div>
                                <div class="info" style="color: #6f7685">
                                    {{ item.info }}
                                </div>
                                <div class="txt-cen txt-white cur-p button">
                                    <div class="swiper-btn bg-blue">
                                        了解更多
                                        <span style="display: none">{{
                                            item.url
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <div class="swiper-btn pos-rel">
                    <div class="swiper-prev bg" @click="prev"></div>
                    <div class="swiper-next bg" @click="next"></div>
                </div>
            </div>
        </div>

        <div class="case-box w">
            <div class="tit-box txt-cen txt-tit">
                <div class="fs-bold fs-34">典型案例</div>
                <p class="fs-16">以卓越的技术与服务赢得众多知名企业的信赖</p>
            </div>
            <div class="flex jus-between">
                <div
                    class="case bg-white cur-p"
                    v-for="(item, index) in homeCase"
                    :key="index"
                    style="width: 380px"
                    @click="$router.push(`/case/caseDetail/${item.UIDS}`)"
                >
                    <div class="bg"></div>
                    <div
                        class="fs-bold fs-18 txt-tit txt-cen"
                        style="height: 80px; line-height: 80px"
                    >
                        {{ item.CASE_NAME }}
                    </div>
                </div>
            </div>
            <div
                class="txt-info fs-16 txt-cen cur-p"
                style="padding: 30px 0 60px"
                @click="$router.push('/case/caseLists')"
            >
                查看更多>>
            </div>
        </div>
    </div>
</template>
<script>
    let system1 = require('../../assets/images/home/sys1.png')
    let system2 = require('../../assets/images/home/sys2.png')
    let system3 = require('../../assets/images/home/sys3.png')
    let system4 = require('../../assets/images/home/sys4.png')

    let vm = null

    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'

    export default {
        data() {
            return {
                news: [],
                system: [
                    {
                        pic: system2,
                        tit: '智慧能源',
                        info:
                            '全面构建数字化、主动化、协同化、智能化的能源管理模式',
                        url: '/smartEnergy',
                    },
                    {
                        pic: system3,
                        tit: '智能物联',
                        info: '物联网技术赋能能源互联网，打造能源服务转型新引擎',
                        url: '/iot',
                    },
                    {
                        pic: system4,
                        tit: '精益服务',
                        info:
                            '以先进的管理能力和成熟的智能化技术，实现企业生产力跃升',
                        url: '/service',
                    },
                    {
                        pic: system1,
                        tit: '数字化',
                        info:
                            '用数字化技术驱动企业管理模式和商业模式创新，创造新的价值增长点',
                        url: '/digitization',
                    },
                ],
                swiperOptions: {
                    // initialSlide: 1,
                    slidesPerView: 3, // 显示的数量
                    speed: 800,
                    spaceBetween: 100, // 每张的间距
                    autoplayDisableOnInteraction: false,
                    loop: true,
                    centeredSlides: true,
                    observer: true,
                    observeParents: true,
                    on: {
                        click: function (swiper, e) {
                            let targetEle = swiper.target
                            if (targetEle.className != 'swiper-btn bg-blue') {
                                return
                            }
                            let path = targetEle.lastChild.innerText
                            vm.$router.push(path)
                        },
                    },
                },
                homeCase: [],
            }
        },
        methods: {
            prev() {
                this.swiper.slidePrev()
            },
            next() {
                this.swiper.slideNext()
            },
            getNewsDetail() {
                this.$http
                    .getIndexNews()
                    .then((res) => {
                        if (res.success) {
                            console.log(res)
                            this.news = res.data
                            this.news.forEach((item) => {
                                item.news = item.news.replace(/<.+?>/g, '')
                                item.news = item.news.replace(/&nbsp;/g, '')
                            })
                        }
                    })
                    .catch((err) => {
                        this.$msgAlert(err)
                    })
            },
        },
        created() {
            vm = this
            this.getNewsDetail()
            this.$http.getHomeCase().then((res) => {
                this.homeCase = res.data
            })
        },
        mounted() {},
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            },
        },
        components: {
            swiper,
            swiperSlide,
        },
    }
</script>

<style lang="scss" scoped>
    .body {
        .ability-box {
            height: 332px;
            .ability {
                width: 300px;
                height: 330px;
                transition: all 0.3s;
                .sign {
                    width: 64px;
                    height: 64px;
                }
                &:nth-child(1) {
                    background-image: url('~@assets/images/home/ability-1.png');
                    .sign {
                        background-image: url('../../assets/images/home/sign-1.png');
                    }
                }
                &:nth-child(2) {
                    background-image: url('~@assets/images/home/ability-2.png');
                    .sign {
                        background-image: url('../../assets/images/home/sign-2.png');
                    }
                }
                &:nth-child(3) {
                    background-image: url('~@assets/images/home/ability-3.png');
                    .sign {
                        background-image: url('../../assets/images/home/sign-3.png');
                    }
                }
                &:nth-child(4) {
                    background-image: url('~@assets/images/home/ability-4.png');
                    .sign {
                        background-image: url('../../assets/images/home/sign-4.png');
                    }
                }
                &:hover {
                    box-shadow: 0px 3px 29px 0px rgba(99, 99, 99, 0.22);
                    height: 332px;
                }
            }
        }

        .system-box {
            height: 690px;
            background-image: url('../../assets/images/home/system.png');
            .info {
                margin: 20px 0 55px;
            }
            @media screen and (max-width: 1400px) {
                .info {
                    margin: 10px 0 30px;
                }
            }
            .button {
                padding-right: 30px;
                .swiper-btn {
                    height: 44px;
                    line-height: 44px;
                }
            }
        }

        .case-box {
            .case {
                &:hover {
                    box-shadow: 0px 3px 29px 0px rgba(99, 99, 99, 0.22);
                }
                .bg {
                    width: 380px;
                    height: 320px;
                }
                &:nth-child(1) .bg {
                    background-image: url('../../assets/images/home/case-1.png');
                }
                &:nth-child(2) .bg {
                    background-image: url('../../assets/images/home/case-2.png');
                }
                &:nth-child(3) .bg {
                    background-image: url('../../assets/images/home/case-3.png');
                }
            }
        }

        .tit-box {
            padding: 58px 0 50px;
            p {
                margin-top: 30px;
            }
        }
    }
</style>

<style lang="scss">
    .system-box {
        .swiper-slide {
            -webkit-transition: transform 1s;
            -moz-transition: transform 1s;
            -ms-transition: transform 1s;
            -o-transition: transform 1s;
            -webkit-transform: scale(1);
            transform: scale(1);
            .sys-box {
                transition: all 1s;
                img {
                    transition: all 1s;
                }
            }
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .none-effect {
            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            -o-transition: none;
        }

        .swiper-prev,
        .swiper-next {
            position: absolute;
            top: 0;
            width: 80px;
            height: 80px;
            cursor: pointer;
        }

        .swiper-prev {
            right: 51%;
            background-image: url('../../assets/images/home/arrow-l.png');
        }
        .swiper-next {
            left: 51%;
            background-image: url('../../assets/images/home/arrow-r.png');
        }
    }
</style>